/**
 * @description 个人详情
 */
//公用样式 
require("../../assets/css/index.less")
//引入weui库
require("../../assets/lib/weui/weui.css");
let weui = require("../../assets/lib/weui/weui.js");
//引入图标
require("../../assets/fonts/iconfont.css");
// 当前页面样式
require("./personal.less")
//工具函数 utils
const dom = require("../../utils/dom");
const local = require("../../utils/local.js");
//引入axios封装的文件
let https = require("../../utils/https.js");

dom.reday(function () {
    //头像
    let headImg
    //性别
    let sex = 0
    //生日
    let birthday
    //省份
    let provinceData
    //城市
    let cityId


    dom.getEvent("#backBtn", function () {
        history.back
        location.href = "my.html"
    })
    // 回填
    function rander() {
        let userData = local.get("userPro");
        let {
            nickName,
            gender,
            provinceId,
            cityId,
            birthday,
            imgUrl,
            sign
        } = userData;
        console.log(userData);
        // imgUrl = ''
        dom.getEle('#headPicVal').src = imgUrl ? https.BASE_URL + imgUrl : require('../../assets/imgs/cat.jpg');
        // dom.getEle('#headPicVal').src = imgUrl ? https.BASE_URL + imgUrl : '../../assets/imgs/cat.jpg'
        headImg = imgUrl;
        dom.getEle('#idName').value = nickName;
        dom.getEle('#sexVal').innerHTML = gender ? "男" : "女"; sex = gender
        dom.getEle('#birthdayVal').innerHTML = birthday;
        dom.getEle('#info').value = sign;

        getPorCity(provinceId,cityId)
    }
    rander()
    //头像上传
    dom.getEvent("#headPicVal", function () {
        // console.dir(dom.getEle("#upLoadPic"));
        dom.getEle("#upLoadPic").click()
    })
    dom.getEle("#upLoadPic").addEventListener("change", function () {
        let pic = this.files[0];
        let fl = new FormData();
        fl.append('file', pic);
        console.log(fl);
        // console.log(111);
        https.post("/api/shared/uploadPortrait", fl, function (res) {
            let { errno, data } = res
            if (errno == 0) {
                dom.getEle('#headPicVal').src = https.BASE_URL + data.url;
                // console.log(https.BASE_URL);
                // console.log(data.url);
                headImg = data.url
            } else {
                weui.topTips('上传失败');
            }
        })
        // console.log(fd.get("file"));
    })
    // 性别

    dom.getEvent('#sex', function () {
        weui.picker([{
            label: '男',
            value: 0
        }, {
            label: '女',
            value: 1
        }], {
            // 选中触发事件
            onConfirm: function (result) {
                console.log('onConfirm===>', result[0].label);
                //把选中的值添加到网页中
                dom.getEle('#sexVal').innerHTML = result[0].label
                gender = result[0].value
            },
            title: '请选择性别'
        });
    })
    // 生日
    dom.getEvent('#birthday', function () {
        weui.datePicker({
            start: 1890,
            end: new Date().getFullYear(),
            onConfirm: function (result) {
                // 处理数据格式
                let birthday2 = result.map(v => {
                    return v.value < 10 ? "0" + v.value : v.value;
                }).join('-')
                //把生日添加到指定位置
                dom.getEle('#birthdayVal').innerHTML = birthday2;
                birthday = birthday2
            },
            title: '请选择生日'
        });
    })


    dom.getEvent('#province', function () {
        //1.发ajax获取省份数据并拼接weui所需格式
        https.get('/api/shared/province', function (res) {
            // console.log(res);
            //解构参数
            let { errno, data } = res;
            //判定
            if (errno == 0) {
                //处理数据格式
                data = data.map(v => {
                    return {
                        label: v.name,
                        value: v.id
                    }
                })
                //2.调用weui选择器
                weui.picker(data, {
                    // 选中触发事件
                    onConfirm: function (result) {
                        //把选中的值添加到网页中
                        dom.getEle('#provinceVal').innerHTML = result[0].label
                        provinceData = result[0].value
                        console.log(provinceData);
                    },
                    title: '请选择省份'
                });
            } else {
                weui.alert(res.message)
            }
        })

    })

    // /api/shared/city
    dom.getEvent('#city', function () {
        //1.发ajax获取省份数据并拼接weui所需格式
        if (provinceData) {
            https.get(`/api/shared/city?provinceId=${provinceData}`, function (res) {
                // console.log(res);
                //解构参数
                let { errno, data } = res;
                //判定
                if (errno == 0) {
                    //处理数据格式
                    data = data.map(v => {
                        return {
                            label: v.name,
                            value: v.id
                        }
                    })
                    //2.调用weui选择器
                    weui.picker(data, {
                        // 选中触发事件
                        onConfirm: function (result) {
                            //把选中的值添加到网页中
                            dom.getEle('#cityVal').innerHTML = result[0].label
                            cityId = result[0].value;
                        },
                        title: '请选择城市'
                    });

                } else {
                    weui.alert(res.message)
                }
            })
        }
    })
    // 个人简介
    dom.getEle("#info").addEventListener("input", function () {
        let leng = this.value.length;
        dom.getEle("#num").innerHTML = leng
    })
    // 保存
    dom.getEvent("#saveBtn", function () {
        https.post('/api/user/changeInfo', {
            imgUrl: headImg,
            nickName: idName.value,
            gender: sex,
            birthday: birthdayVal.innerText,
            provinceId: provinceData,
            cityId,
            sign: info.value,
        }, function (res) {
            //解构参数
            let { errno, data } = res;
            //判定
            if (errno == 0) {
                weui.topTips('修改数据成功!');
                //跳转页面
                location.href = 'my.html'
            } else {
                weui.alert(res.message)
            }
        })

    })

    //省份城市数据回填
    function getPorCity(por,city){
        //获取省份
        https.get('/api/shared/province',function(res){
            let {errno,data}=res
            console.log(data);
            if(errno==0){
                let persId = data.filter(v=>{
                    return v.id == por
                })
                provinceVal.textContent=persId[0].name

                //获取城市
                https.get('/api/shared/city?provinceId='+por,function(res){
                    let {errno,data}=res
                    console.log(data);
                    if(errno==0){
                        let cityyId = data.filter(v=>{
                            return v.id == city
                        })
                        cityVal.textContent=cityyId[0].name
        
                        //获取城市
                        
                    }
                })
                
            }
        })
    }   
    
})
